<script setup>
import { onMounted, ref, watch } from 'vue';

import { EchartsUI, useEcharts } from '@vben/plugins/echarts';


const chartRef = ref(null);
const { renderEcharts } = useEcharts(chartRef);
let props = defineProps(['associationClassificationOrgData'])

const option = ref({
  backgroundColor: 'transparent',
  grid: {
    top: 0,
    bottom: 20,
    left: '5%',
    right: '8%',
    containLabel: true,
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },

  yAxis: {
    type: 'category',
    data: [], // This will be dynamically set based on categoryName
    axisLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.5)',
      },
    },
    axisLabel: {
      color: '#fff',
      fontSize: 12,
    },
  },
  xAxis: {
    type: 'value',
    axisLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.5)',
      },
    },
    axisLabel: {
      color: '#fff',
      fontSize: 12,
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.1)',
      },
    },
  },
  series: [], // This will be dynamically set based on seriesData
});

watch(
  () => props.associationClassificationOrgData,
  (newVal) => {
    if (newVal) {
      option.value.yAxis.data = newVal.categoryName;
      option.value.series = newVal?.seriesData?.map(item => ({
        name: item.name,
        type: 'bar',
        stack: 'total',
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: '#00f7ff',
              },
              {
                offset: 1,
                color: '#0051ff',
              },
            ],
          },
          shadowColor: 'rgba(0, 247, 255, 0.6)',
          shadowBlur: 15,
        },
        data: item.data,
      })) || [];
      renderEcharts(option.value);
    }
  },
  { immediate: true }
);

</script>

<template>
  <div class="box">
    <EchartsUI ref="chartRef" class="w-full" style="height: 260px" />
  </div>
</template>

<style lang="scss" scoped>
.box {
  width: 100%;
}
</style>
